<%--
  Created by IntelliJ IDEA.
  User: 唐清枫
  Date: 2023/9/15
  Time: 13:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/Core_values.js"></script>

    <style>
        #app {
            width: 1000px;
            position:absolute;
            left:0;
            right:0;
            margin:0 auto;
            margin-top: 150px;
        }
    </style>
</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="app">
    <span style="font-size:30px">当前时间:</span><span style="color: mediumblue;font-size:30px">{{ currentTime }}</span>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column prop="workMWork" label="早上上班时间" width="200"></el-table-column>
            <el-table-column prop="workMQuit" label="上午下班时间" width="200"></el-table-column>
            <el-table-column prop="workAWork" label="中午上班时间" width="200"></el-table-column>
            <el-table-column prop="workAQuit" label="下午下班时间" width="200"></el-table-column>
            <el-table-column label="修改" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openDialogUpdate(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div>
        <!-- 模态框，用作修改数据时做数据回显用 -->
        <el-dialog title="修改上下班时间" :visible.sync="dialogFormVisible">
            <div>
                <span>上午上班时间</span>
                <div>
                    <el-input placeholder="请输入内容" v-model="form.workMWork"></el-input>
                </div>
                <span>下午下班时间</span>
                <div>
                    <el-input placeholder="请输入内容" v-model="form.workMQuit"></el-input>
                </div>
            </div>
            <div>
                <span>下午下班时间</span>
                <div>
                    <el-input placeholder="请输入内容" v-model="form.workAWork"></el-input>
                </div>
                <span>下午下班时间</span>
                <div>
                    <el-input placeholder="请输入内容" v-model="form.workAQuit"></el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatetime()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            pickerOptions: {
                selectableRange: '00:00:00-23:59:59', // 设置可选时间范围
                format: 'HH:mm' // 设置时间格式为时分
            },
            currentTime: '',
            tableData: [],
            form:{
                workMWork:"",
                workMQuit:"",
                workAWork:"",
                workAQuit:""
            },
            formLabelWidth: '120px',
        },
        methods: {
            openDialogUpdate(data){               //数据回显
                var v = this
                v.form.workMWork=data.workMWork
                v.form.workMQuit=data.workMQuit
                v.form.workAWork=data.workAWork
                v.form.workAQuit=data.workAQuit
                v.dialogFormVisible=true
            },
            handleTimeChange() {
                var v = this
                console.log('选择的时间:', v.time);
            },
            selectPersonal() {
                var v = this
                $.ajax({
                    url: "../work/select",
                    type: "get",
                    success: function (res) {
                        v.tableData = res.object
                        // console.log(res.object)
                    }
                })
            },
            updatetime(){
                var v = this
                $.ajax({
                    url:"../work/updatetime",
                    type:"post",
                    contentType:"application/json",
                    datatype:"json",
                    data:JSON.stringify(v.form),
                    success:function (res) {
                        v.$message.success(res.message)
                        v.selectPersonal()
                        v.dialogFormVisible = false
                    }
                })
            }
        },
        mounted: function () {
            this.selectPersonal()
            setInterval(() => {
                let now = new Date();
                this.currentTime = now.toLocaleTimeString();
            }, 1000);
        }
    })
</script>

</body>
</html>
